<template>
  <div>
    <el-form
      ref="editFormRef"
      :model="editForm.data"
      label-width="120"
      @change="editData"
    >
      <el-row>
        <el-form-item label="车场图片" prop="fileId">
          <el-upload
            action="#"
            v-model:file-list="fileList"
            :before-upload="beforeAvatarUpload"
            :on-change="fileListUpLoad"
            :before-remove="beforeRemove"
            :limit="3"
            :disabled="fileList.length >= 3 ? true : false"
            list-type="picture-card"
          >
            <el-icon><Plus /></el-icon>
            <template #file="{ file }">
              <div>
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                <span class="el-upload-list__item-actions">
                  <!-- <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview()"
                  >
                    <el-icon><ZoomIn /></el-icon>
                  </span> -->

                  <span
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file.url)"
                  >
                    <el-icon><Delete /></el-icon>
                  </span>
                </span>
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="联系人" prop="link">
          <el-input
            v-model="editForm.data.link"
            style="width: 320px"
            placeholder="请输入联系人"
          />
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input
            v-model="editForm.data.phone"
            style="width: 320px"
            placeholder="请输入联系电话"
          />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="场库名称" prop="name">
          <el-input
            v-model="editForm.data.name"
            style="width: 320px"
            placeholder="请输入场库名称"
          />
        </el-form-item>
        <el-form-item label="物业名称" prop="comId">
          <el-select
            v-model="editForm.data.comId"
            filterable
            style="width: 320px"
            placeholder="请选择物业名称"
          >
            <el-option
              v-for="item in comNameList.data"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="运营状态" prop="status">
          <el-select
            v-model="editForm.data.status"
            filterable
            style="width: 320px"
            placeholder="请选择运营状态"
          >
            <el-option
              v-for="item in statusList.data"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车场类别" prop="category">
          <el-select
            v-model="editForm.data.category"
            filterable
            style="width: 320px"
            placeholder="请选择车场类别"
          >
            <el-option
              v-for="item in categoryList.data"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="建筑类别" prop="type">
          <el-select
            v-model="editForm.data.type"
            filterable
            style="width: 320px"
            placeholder="请选择建筑类别"
          >
            <el-option
              v-for="item in typeList.data"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否含套场" prop="infield">
          <el-select
            v-model="editForm.data.infield"
            filterable
            style="width: 320px"
            placeholder="请选择套场"
          >
            <el-option
              v-for="item in infieldList.data"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="外场泊位数" prop="totalSpaces" v-if="editForm.data.infield == 1">
          <el-input
            v-model="editForm.data.totalSpaces"
            style="width: 320px"
            placeholder="请输入外场泊位数"
          />
        </el-form-item>
        <el-form-item label="总泊位数" prop="totalSpaces" v-if="editForm.data.infield == 0">
          <el-input
            v-model="editForm.data.totalSpaces"
            style="width: 320px"
            placeholder="请输入总泊位数"
          />
        </el-form-item>
        <el-form-item
          label="套场泊位数"
          prop="inSpaces"
          v-if="editForm.data.infield == 1"
        >
          <el-input
            v-model="editForm.data.inSpaces"
            style="width: 320px"
            placeholder="请输入套场泊位数"
          />
        </el-form-item>
        <el-form-item label="套场泊位数" v-if="editForm.data.infield == 0">
          <el-input style="width: 320px" disabled />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="经度" prop="longitude">
          <el-input
            v-model="editForm.data.longitude"
            style="width: 320px"
            placeholder="请输入经度"
          />
        </el-form-item>
        <el-form-item label="纬度" prop="latitude">
          <el-input
            v-model="editForm.data.latitude"
            style="width: 320px"
            placeholder="请输入纬度"
          />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="具体位置" prop="address">
          <el-input
            v-model="editForm.data.address"
            style="width: 760px"
            placeholder="请输入具体位置"
          />
        </el-form-item>
      </el-row>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { Plus, Delete, ZoomIn } from "@element-plus/icons-vue";
import { getUpload } from "../request.js";

const emits = defineEmits(["edit"]);

const props = defineProps({
  editOrderDetails: {
    type: Object,
    default: () => {},
  },
  listData: {
    type: Object,
    default: () => {},
  },
});

const editFormRef = ref("");
const editForm = reactive({
  data: {
    name: props.editOrderDetails.name,
    comId: props.editOrderDetails.comId,
    status: props.editOrderDetails.status,
    category: props.editOrderDetails.category,
    type: props.editOrderDetails.type,
    infield: props.editOrderDetails.infield == true ? 1 : 0,
    totalSpaces: props.editOrderDetails.totalSpaces,
    inSpaces: props.editOrderDetails.inSpaces,
    longitude: props.editOrderDetails.longitude,
    latitude: props.editOrderDetails.latitude,
    address: props.editOrderDetails.address,
  },
});

const comNameList = reactive({
  data: [],
});

const statusList = reactive({
  data: [],
});

const categoryList = reactive({
  data: [],
});

const typeList = reactive({
  data: [],
});

const infieldList = reactive({
  data: [
    {
      id: 1,
      name: "是",
    },
    {
      id: 0,
      name: "否",
    },
  ],
});

const fileList = ref([]);

const beforeAvatarUpload = (file) => {
  return new Promise(async (resolve, reject) => {
    if (
      file.type !== "image/jpeg" &&
      file.type !== "image/png" &&
      file.type !== "image/jpg"
    ) {
      ElMessage.error("所上传图片类型不支持");
      reject();
    } else if (file.size / 1024 > 100) {
      ElMessage.error("所上传图片不能超过100K");
      reject();
    }
  });
};

const fileIdObj = ref([]);
const imageObj = ref([]);

const fileListUpLoad = (uploadFile) => {
  const fileSize = uploadFile.size / 1024;
  if (fileSize < 100) {
    getUpload({
      file: uploadFile.raw,
      fileType: "img",
      bucket: "cipp-cpark",
      tags: "场库编辑",
    })
      .then((res) => {
        // console.log(res);
        if (editForm.data.fileId) {
          editForm.data.fileId += "|";
          editForm.data.fileId += res.data.result.id;
          editForm.data.image += "|";
          editForm.data.image += res.data.result.bucket + "/" + res.data.result.filePath;
        } else {
          fileIdObj.value.push(res.data.result.id);
          editForm.data.fileId = fileIdObj.value.join("|");
          imageObj.value.push(res.data.result.bucket + "/" + res.data.result.filePath);
          editForm.data.image = imageObj.value.join("|");
        }
        editFormRef.value.validateField("fileId");
      })
      .catch((error) => {
        console.error("上传失败", error);
      });
  }
};

const beforeRemove = (file) => {
  console.log(file);
};

const handleRemove = (val) => {
  fileList.value = fileList.value.filter((item) => item.url !== val);
  const urls = val.split("/").slice(3).join("/");
  const uid = editForm.data.fileId.split("|");
  const images = editForm.data.image.split("|");
  const img = uid.map((id, index) => {
    return {
      uid: id,
      url: images[index],
    };
  });
  const array = img.filter((item) => item.url !== urls);
  editForm.data.fileId = array.map((item) => item.uid).join("|");
  editForm.data.image = array.map((item) => item.url).join("|");
  editData()
};

onMounted(() => {
  setTimeout(() => {
    comNameList.data = props.listData.comNameList;
    statusList.data = props.listData.statusList;
    categoryList.data = props.listData.categoryList;
    typeList.data = props.listData.typeList;

    const images = props.editOrderDetails.image.split("|");
    const uid = props.editOrderDetails.fileId.split("|");
    fileList.value = uid.map((id, index) => {
      return {
        uid: id,
        url: "https://cippfile.ecaray.com/" + images[index],
      };
    });
    editForm.data.fileId = props.editOrderDetails.fileId;
    editForm.data.image = props.editOrderDetails.image;
    const contacts = JSON.parse(props.editOrderDetails.contacts);
    editForm.data.link = contacts.name;
    editForm.data.phone = contacts.phone;
  }, 1000);
});

const editData = () => {
  emits("edit", editForm.data);
};
</script>
